<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue起步</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <!--
        数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
        <span>Message: {{ msg }}</span>
    -->
    <span id="app-1">Message: {{ msg }}</span>
    <p />
    <!-- 一次性绑定的例子 -->
    <span id="app-2" v-once>This will never change: {{ msg }}</span>

    <!--
        双大括号会将数据解释为纯文本，而非 HTML 。
        为了输出真正的 HTML ，你需要使用 v-html 指令

        通常我们不这样做，因为存在XSS的风险
    -->
    <div id="app-3" v-html="rawHtml"></div>

    <!--

        属性绑定的话，使用v-bind指令：使用格式为，v-bind:属性名称
        这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除
    -->
    <div id="app-4" v-bind:class="className"></div>
    <button id="app-5" v-bind:disabled="disable">Button</button>

    <!-- 
        其实绑定也是支持表达式的，不过要求是单行返回结果，也就是判断要用三元符
        {{ number + 1 }}
        {{ ok ? 'YES':'NO' }}
        {{ msg.split(' ').reverse().join('') }}

        <div v-bind:id="'list-'+id"></div>

        另外就是全局变量的访问问题，模板表达式其实是运行在沙盒里面，不能访问用户定义
        的全局变量，只能访问特定的白名单变量

     -->

    <p id="app-6" v-if="seen">Now you see me</p>

    <!-- 属性绑定 用v-bind或者:属性值 -->
    <a id="app-7" v-bind:href="url">{{title}}</a>
    <a id="app-8" :href="url">{{title}}</a>

    <!-- 事件监听，使用v-on:事件名称 或者 @事件名称 -->
    <p></p>
    <button id="app-9" v-on:click="show">{{name}}</button>
    <button id="app-10" @click="show">{{name}}</button>

    <!--
         还可以通过，修饰符进行事件绑定
     -->
    <form v-on:submit.prevent="onSubmit"></form>

    <!--
        过滤器用于对文本进行格式化和转换，使用的格式如下：
        原文本 | 过滤器函数名称1 | 过滤器函数名称2 | ...
        如: 
        {{ message | capitalize }}

        <div v-bind:id="rawId | formatId"></div>


     -->
    <p id="app-11">
        {{msg | split | reverse | join}}
    </p>

</body>
<script>
    var app1 = new Vue({
        el: "#app-1",
        data: {
            msg: "Hello Vue!"
        }
    })

    var app2 = new Vue({
        el: "#app-2",
        data: {
            msg: "Hello Vue!"
        }
    })

    var app3 = new Vue({
        el: "#app-3",
        data: {
            rawHtml: "<a href='http://www.baidu.com'>百度一下</a>"
        }
    })

    // 属性绑定
    var app4 = new Vue({
        el: "#app-4",
        data: {
            className: "my-class"
        }
    })

    var app5 = new Vue({
        el: "#app-5",
        data: {
            disable: false
        }
    })

    // v-if 指令根据seen真假来移除/插入 <p> 元素,注意这里是移除和插入
    var app6 = new Vue({
        el: "#app-6",
        data: {
            seen: true
        }
    })

    var app7 = new Vue({
        el: "#app-7",
        data: {
            url: "http://www.163.com",
            title: "网易"
        }
    })

    var app8 = new Vue({
        el: "#app-8",
        data: {
            url: "http://www.google.com",
            title: "谷歌"
        }
    })

    var app9 = new Vue({
        el: "#app-9",
        data: {
            name: "Say Hi"
        },
        methods: {
            show: function () {
                alert("Hi,I'm Vue! ")
            }
        }
    })

    var app10 = new Vue({
        el: "#app-10",
        data: {
            name: "Say Hi"
        },
        methods: {
            show: function () {
                alert("Hi,I'm Vue! ")
            }
        }
    })

    var app11 = new Vue({
        el: "#app-11",
        data: {
            msg: "Say Hi"
        },
        filters: {
            split: function (value) {
                if (!value) return ''
                return value.split('')
            },
            reverse:function(value){
                return value.reverse();
            },
            join:function(value){
                return value.join('')
            }
        }
    })

</script>

</html>